<template>
  <div>
    <div class="ser_div">
      <el-row>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 订单号 </el-col>
            <el-col :span="16">
              <el-input v-model="ser.order_number" type="number"></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 流水号 </el-col>
            <el-col :span="16">
              <el-input v-model="ser.serial_number"></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 客户 </el-col>
            <el-col :span="16">
              <el-select
                v-model="ser.customer_id"
                filterable
                placeholder="请选择客户"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in CustomerList"
                  :key="index"
                  :label="item.customer_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 产品 </el-col>
            <el-col :span="16">
              <el-select
                v-model="ser.product_id"
                filterable
                multiple
                @change="product_id_change"
                placeholder="请选择产品"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in productList"
                  :key="index"
                  :label="item.product_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 型号 </el-col>
            <el-col :span="16">
              <el-select
                filterable
                v-model="ser.model_number_id"
                @change="model_number_id_change"
                placeholder="请选择型号"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in ModelNumberList"
                  :key="index"
                  :label="item.model_number"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 订单日期范围 </el-col>
            <el-col :span="16">
              <el-date-picker
                v-model="order_data"
                @change="order_data_change"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-button @click="search(0)" class="add_btn" icon="el-icon-search"
            >查询</el-button
          >
          <el-button @click="searchreset" icon="el-icon-refresh" class="add_btn"
            >重置</el-button
          >
          <el-button
            @click="search(2)"
            icon="el-icon-plus"
            class="add_btn"
            v-permission="['dingdan_daochu']"
            >导出</el-button
          >
          <el-button
            @click="add_color('ruleForm')"
            icon="el-icon-plus"
            class="add_btn"
            v-permission="['dingdan_add']"
            >新增订单</el-button
          >
        </el-col>
      </el-row>
    </div>
    <!-- 勾选显示列 -->
    <!-- <el-row>
      <el-col :span="21" style="text-align: right;">
        <span style="padding-right:15px">列表显示字段</span>
        <el-cascader
        ref="cascader"
          v-model="permissions_arr"
          :options="options_order"
          :props="props"
          clearable
          collapse-tags
          @change="order_change"
        ></el-cascader>
      </el-col>
      <el-col :span="2"  style="text-align: right;">
        <el-button @click="push_permission">确定</el-button>
      </el-col>
    </el-row> -->

    <el-table
      :data="dataList"
      v-loading="loading"
      stripe
      style="width: 100%"
      border
      @sort-change="sort_change"
    >
      <el-table-column
        prop="id"
        label="ID"
        width="70"
        v-if="forEachs('id') || isshow"
      >
      </el-table-column>
      <el-table-column
        prop="serial_number"
        label="流水号"
        width="100"
        v-if="forEachs('serial_number') || isshow"
      >
      </el-table-column>
      <el-table-column
        prop="order_number"
        label="订单号"
        width="100"
        v-if="forEachs('order_number') || isshow"
      >
      </el-table-column>
      <el-table-column
        prop="customer"
        label="客户"
        width="100"
        v-if="forEachs('customer_id') || isshow"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.customer ? scope.row.customer.customer_name : "备货"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="product_name"
        label="产品"
        width="80"
        v-if="forEachs('product_id') || isshow"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.product.product_name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="model_number"
        label="型号"
        width="80"
        v-if="forEachs('model_number_id') || isshow"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.model_number ? scope.row.model_number.model_number : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="型号图片"
        width="100"
        v-if="forEachs('model_number_id') || isshow"
      >
        <template slot-scope="scope">
          <img
            :src="uploadImgUrl + scope.row.model_number.file.file_url"
            @click="push_img(scope.row)"
            style="
              cursor: pointer;
              display: block;
              width: 60px;
              display: block;
              margin: 0 auto;
            "
            v-if="scope.row.model_number.file != null"
          />
          <img
            src="../../../src/assets/zwtp.jpg"
            v-else
            style="width: 60px; display: block; margin: 0 auto"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="color"
        label="规格"
        width="80"
        v-if="forEachs('specification_id') || isshow"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.specification ? scope.row.specification.specification : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="color"
        label="颜色"
        width="80"
        v-if="forEachs('color_id') || isshow"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.color ? scope.row.color.color : "" }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="direction" label="大小" width="120" >
      </el-table-column> -->
      <el-table-column
        prop="direction"
        label="方向"
        width="80"
        v-if="forEachs('direction') || isshow"
      >
      </el-table-column>
      <el-table-column
        label="紧急程度"
        width="80"
        prop="emergency_procedure"
        v-if="forEachs('emergency_procedure') || isshow"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.emergency_procedure == 1" style="color: #333"
            >普通</span
          >
          <span
            v-if="scope.row.emergency_procedure == 2"
            style="color: #1890ff; font-weight: bold"
            >紧急</span
          >
          <span
            v-if="scope.row.emergency_procedure == 3"
            style="color: #ff0000; font-weight: bold"
            >十万火急</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        width="120"
        v-if="forEachs('remark') || isshow"
      >
      </el-table-column>
      <el-table-column
        prop="customer"
        label="管理员"
        width="80"
        v-if="forEachs('account_executive_id') || isshow"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.admin_user.company_name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="业务员"
        v-if="forEachs('account_executive_id') || isshow"
      >
        <template slot-scope="scope">
          {{
            scope.row.account_executive
              ? scope.row.account_executive.company_name
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="forEachs('order_date') || isshow"
        prop="order_date"
        label="订单日期"
        :formatter="formatterTime"
        width="100"
      >
      </el-table-column>
      <el-table-column
        v-if="forEachs('delivery_date') || isshow"
        prop="delivery_date"
        label="交货日期"
        :formatter="formatterTime"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="receivables"
        label="应收款"
        width="80"
        v-if="forEachs('receivables') || isshow"
      >
      </el-table-column>
      <el-table-column
        prop="received"
        label="定金"
        width="80"
        v-if="forEachs('received') || isshow"
      >
      </el-table-column>
      <el-table-column
        label="是否补货"
        width="80"
        v-if="forEachs('is_replenishment') || isshow"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.is_replenishment == 1">是</span>
          <span v-if="scope.row.is_replenishment == 2">否</span>
        </template>
      </el-table-column>
      <el-table-column
        label="是否备货"
        width="80"
        v-if="forEachs('is_stock_up') || isshow"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.is_stock_up == 1">是</span>
          <span v-if="scope.row.is_stock_up == 2">否</span>
        </template>
      </el-table-column>
      <div v-for="(item, index) in dataList.models_field" :key="index">
        <el-table-column :prop="item" :label="push_name(item)">
        </el-table-column>
      </div>

      <el-table-column label="操作" width="100" fixed="right">
        <template slot-scope="scope">
          <el-dropdown trigger="click">
            <el-button type="primary" size="small">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button
                  @click="set_products(scope.row)"
                  type="text"
                  v-permission="['dingdan_lingdan_more']"
                  v-if="scope.row.is_replenishment == 2"
                  >领单详情</el-button
                >
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  v-permission="['dingdan_xiugai']"
                  @click="set_product(scope.row)"
                  type="text"
                  >编辑</el-button
                >
              </el-dropdown-item>

              <el-dropdown-item>
                <el-popconfirm
                  v-permission="['dingdan_shanchu']"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除此订单吗？"
                  @confirm="del_Order(scope.row.id)"
                >
                  <el-button slot="reference" size="small" type="text"
                    >删除</el-button
                  >
                </el-popconfirm>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <!-- <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="是否删除这条数据？"
            @confirm="del_product(scope.row)"
          >
            <el-button slot="reference" type="text" icon="el-icon-delete">
              删除</el-button
            >
          </el-popconfirm> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        @prev-click="prev"
        @next-click="next"
        :current-page.sync="pagination.page"
        :page-size="pagination.per_page"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      :title="title"
      :visible.sync="isProduct"
      width="60%"
      :close-on-click-modal="false"
      @close="add_order_close('ruleForm')"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row style="margin-bottom: 25px">
          <el-col :span="24">
            <span style="font-size: 20px">当前订单审核流程：</span>
            <div
              v-for="(item, index) in AuditList"
              :key="item.id"
              style="display: inline; margin-left: 15px"
            >
              <span
                style="color: #e71f11; font-size: 22px"
                v-if="item.status == 1"
                >{{ index + 1 }}:{{ item.audit_name }}</span
              >
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="产品" prop="product_id">
              <el-select
                filterable
                v-model="ruleForm.product_id"
                :disabled="disableds_product"
                placeholder="请选择产品"
                style="width: 100%"
                @change="product_id_change_1"
              >
                <el-option
                  v-for="(item, index) in productList"
                  :key="index"
                  :label="item.product_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="center">基础属性</el-divider>
        <div class="list_order" v-if="FieldList.length > 0">
          <div class="lis" v-if="forEachs('serial_number')">
            <el-form-item label="流水号" :prop="required('serial_number')">
              <el-input
                v-model="ruleForm.serial_number"
                :disabled="disableds"
              ></el-input>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('order_number')">
            <el-form-item label="订单号" :prop="required('order_number')">
              <el-input
                v-model="ruleForm.order_number"
                :disabled="disableds"
              ></el-input>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('order_date')">
            <el-form-item label="下单日期" :prop="required('order_date')">
              <el-date-picker
                v-model="ruleForm.order_date"
                :disabled="disableds"
                type="date"
                format="yyyy 年 MM 月 dd 日"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('delivery_date')">
            <el-form-item label="交货日期" :prop="required('delivery_date')">
              <el-date-picker
                v-model="ruleForm.delivery_date"
                :disabled="disableds"
                type="date"
                format="yyyy 年 MM 月 dd 日"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('customer_id')">
            <el-form-item label="客户" :prop="required('customer_id')">
              <el-select
                filterable
                @change="customer_change"
                v-model="ruleForm.customer_id"
                :disabled="disableds"
                placeholder="请选择客户"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in CustomerList"
                  :key="index"
                  :label="item.customer_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('account_executive_id')">
            <el-form-item
              label="业务员"
              :prop="required('account_executive_id')"
            >
              <el-select
                filterable
                @change="account_executive_change"
                v-model="ruleForm.account_executive_id"
                :disabled="disableds"
                placeholder="请选择业务员"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in EmployeeList"
                  :key="index"
                  :label="item.company_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('model_number_id')">
            <el-form-item label="型号" :prop="required('model_number_id')">
              <el-select
                filterable
                v-model="ruleForm.model_number_id"
                @change="model_number_id_change"
                placeholder="请选择型号"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in ModelNumberList"
                  :key="index"
                  :label="item.model_number"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('color_id')">
            <el-form-item label="颜色" :prop="required('color_id')">
              <el-select
                @change="yanse_change"
                filterable
                allow-create
                v-model="ruleForm.color_id"
                :disabled="disableds"
                placeholder="请选择颜色"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in ColorList"
                  :key="index"
                  :label="item.color"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('specification_id')">
            <el-form-item label="规格" :prop="required('specification_id')">
              <el-select
                @change="guige_change"
                filterable
                allow-create
                v-model="ruleForm.specification_id"
                :disabled="disableds"
                placeholder="请选择规格"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in SpecificationList"
                  :key="index"
                  :label="item.specification"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('direction')">
            <el-form-item label="方向" :prop="required('direction')">
              <el-select
                filterable
                allow-create
                @change="direction_change"
                v-model="ruleForm.direction"
                :disabled="disableds"
                placeholder="请选择方向"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in directionList"
                  :key="index"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
              <!-- <el-input
                v-model="ruleForm.direction"
                :disabled="disableds"
              ></el-input> -->
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('is_replenishment')">
            <el-form-item label="是否补录" :prop="required('is_replenishment')">
              <el-radio-group
                v-model="ruleForm.is_replenishment"
                :disabled="disableds"
              >
                <el-radio label="1">是</el-radio>
                <el-radio label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('emergency_procedure')">
            <el-form-item
              label="紧急程度"
              :prop="required('emergency_procedure')"
            >
              <el-radio-group
                v-model="ruleForm.emergency_procedure"
                :disabled="disableds"
              >
                <el-radio label="1">普通</el-radio>
                <el-radio label="2">紧急</el-radio>
                <el-radio label="3">十万火急</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('is_stock_up')">
            <el-form-item label="是否备货" :prop="required('is_stock_up')">
              <el-radio-group
                v-model="ruleForm.is_stock_up"
                :disabled="disableds"
              >
                <el-radio label="1">是</el-radio>
                <el-radio label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div
            class="lis"
            v-if="ruleForm.is_replenishment == 1 && forEachs('num')"
          >
            <el-form-item label="件数" :prop="required('num')">
              <el-input
                v-model="ruleForm.num"
                type="number"
                :disabled="disableds"
              ></el-input>
            </el-form-item>
          </div>
          <div
            class="lis"
            v-if="ruleForm.is_replenishment == 1 && forEachs('warehouse_id')"
          >
            <el-form-item label="仓库及货架" :prop="required('warehouse_id')">
              <el-select
                v-model="ruleForm.warehouse_id"
                :disabled="disableds"
                placeholder="请选择仓库"
                @change="select_huojiua"
                style="width: 49%"
              >
                <el-option
                  v-for="(item, index) in cangkulist"
                  :key="index"
                  :label="item.warehouse_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="ruleForm.goods_shelf_id"
                :disabled="disableds"
                placeholder="请选择货架"
                @change="select_goods_shelf"
                style="width: 50%; margin-left: 1%"
              >
                <el-option
                  v-for="(item, index) in huojialist"
                  :key="index"
                  :label="item.goods_shelf_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('receivables')">
            <el-form-item label="应收款" :prop="required('receivables')">
              <el-input v-model="ruleForm.receivables"></el-input>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('received')">
            <el-form-item label="定金" :prop="required('received')">
              <el-input v-model="ruleForm.received"></el-input>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('remark')">
            <el-form-item label="备注" :prop="required('remark')">
              <el-input
                v-model="ruleForm.remark"
                type="textarea"
                :disabled="disableds"
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <el-divider content-position="center" v-if="FieldList.length > 0"
          >额外属性</el-divider
        >
        <div class="list_order" v-if="FieldList.length > 0">
          <div class="lis" v-for="(item, index) in FieldList_new" :key="index">
            <el-form-item :label="item.name">
              <el-input
                v-if="item.formtype == 'input'"
                v-model="item.default_value"
                type="input"
                @input="ewai_input(item.default_value,item.field)"
              ></el-input>
              <el-select
                v-if="item.formtype == 'select'"
                v-model="item.default_value"
                placeholder="请选择"
              >
                <el-option
                  v-for="(ite, index) in item.option_list"
                  :key="index"
                  :label="ite.option_name"
                  :value="ite.option_id"
                >
                </el-option>
              </el-select>

              <el-radio-group
                v-if="item.formtype == 'radio'"
                v-model="item.default_value"
              >
                <el-radio
                  v-for="(ite, index) in item.option_list"
                  :key="index"
                  :label="ite.option_id"
                  >{{ ite.option_name }}</el-radio
                >
              </el-radio-group>

              <el-date-picker
                v-if="item.formtype == 'datetime'"
                v-model="item.default_value"
                type="date"
                format="yyyy 年 MM 月 dd 日"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="isProduct = false"
          type="primary"
          size="small"
          style="margin-right: 10px"
          >取 消</el-button
        >
        <!-- <el-button type="primary" size="small" @click="submitadds('ruleForm')"
          >确认</el-button
        > -->
        <el-popconfirm
          confirm-button-text="确定"
          cancel-button-text="取消"
          title="是否确认订单信息？"
          icon="el-icon-info"
          icon-color="red"
          @confirm="submitadd('ruleForm')"
        >
          <el-button slot="reference" type="primary" size="small">
            确认</el-button
          >
        </el-popconfirm>
        <!-- <el-popconfirm
          confirm-button-text="确定"
          cancel-button-text="取消"
          title="是否确认订单信息？"
          icon="el-icon-info"
          icon-color="red"
          @confirm="submitadd('ruleForm')"
        >
          <el-button slot="reference" type="primary" size="small">
            确认</el-button
          >
        </el-popconfirm> -->
      </span>
    </el-dialog>

    <el-dialog
      title="订单详情"
      :visible.sync="isjietu"
      width="53%"
      :close-on-click-modal="false"
    >
      <div id="printArea" ref="printArea">
        <table style="width: 100%; border-collapse: collapse">
          <tr
            style="
              display: grid;
              grid-template-columns: 1fr;
              place-items: center;
              justify-content: center;
              align-items: center;
            "
          >
            <td>
              <span>订单号</span>
              <span>{{ ruleForm.order_number }}</span>
            </td>

            <td>
              <span>流水号</span>
              <span>{{ ruleForm.serial_number }}</span>
            </td>

            <td>
              <span>下单日期</span>
              <span>{{ ruleForm.order_date }}</span>
            </td>

            <td>
              <span>交货日期</span>
              <span>{{ ruleForm.delivery_date }}</span>
            </td>
            <td>
              <span>客户</span>
              <span>{{ ruleForm.customer_name }}</span>
            </td>
            <td>
              <span>业务员</span>
              <span>{{ ruleForm.account_executive }}</span>
            </td>

            <td>
              <span>产品</span>
              <span>{{ ruleForm.product_name }}</span>
            </td>
            <td>
              <span>型号</span>
              <span>{{ ruleForm.model_number }}</span>
            </td>

            <td>
              <span>颜色</span>
              <span>{{ ruleForm.color }}</span>
            </td>

            <td v-if="forEachs('specification_id')">
              <span>规格</span>
              <span>{{ ruleForm.specification }}</span>
            </td>

            <td v-if="forEachs('direction')">
              <span>方向</span>
              <span>{{ ruleForm.direction }}</span>
            </td>
            <td v-if="forEachs('is_replenishment')">
              <span>是否补录</span>
              <span>{{ ruleForm.is_replenishment == 1 ? "是" : "否" }}</span>
            </td>
            <td v-if="forEachs('emergency_procedure')">
              <span>紧急程度</span>
              <span>{{
                ruleForm.emergency_procedure == 1
                  ? "普通"
                  : ruleForm.emergency_procedure == 2
                  ? "紧急"
                  : "十万火急"
              }}</span>
            </td>
            <td v-if="forEachs('is_stock_up')">
              <span>是否备货</span>
              <span>{{ ruleForm.is_stock_up == 1 ? "是" : "否" }}</span>
            </td>
            <td v-if="ruleForm.is_replenishment == 1 && forEachs('num')">
              <span>件数</span>
              <span>{{ ruleForm.num }}</span>
            </td>
            <td
              v-if="ruleForm.is_replenishment == 1 && forEachs('warehouse_id')"
            >
              <span>仓库</span>
              <span>{{ ruleForm.warehouse }}</span>
            </td>
            <td
              v-if="ruleForm.is_replenishment == 1 && forEachs('warehouse_id')"
            >
              <span>货架</span>
              <span>{{ ruleForm.goods_shelf }}</span>
            </td>
            <td v-if="forEachs('receivables')">
              <span>应收款</span>
              <span>{{ ruleForm.receivables }}</span>
            </td>
            <td v-if="forEachs('received')">
              <span>应收款</span>
              <span>{{ ruleForm.received }}</span>
            </td>
            <td v-for="(item, index) in FieldList_new" :key="index">
              <span>
                {{ item.name }}
              </span>
              <span>{{ item.default_value }}</span>
            </td>
          </tr>
          <tr>
            <td v-if="forEachs('remark')" style="width: 100%">
              <span style="width: 150px">备注</span>
              <span style="flex: 1">{{ ruleForm.remark }}</span>
            </td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="isjietu = false"
          type="primary"
          size="small"
          style="margin-right: 10px"
          >取 消</el-button
        >
        <el-popconfirm
          confirm-button-text="确定"
          cancel-button-text="取消"
          title="是否确认订单信息？"
          icon="el-icon-info"
          icon-color="red"
          @confirm="submitadd"
        >
          <el-button slot="reference" type="primary" size="small">
            确认</el-button
          >
        </el-popconfirm>
      </span>
    </el-dialog>

    <el-dialog
      title="生产订单领取及完成情况表"
      :visible.sync="isProducts"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-table
        :data="moreList"
        stripe
        @selection-change="handleSelectionChang"
        style="width: 100%"
        border
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="serial_number" label="工种" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.job_type.job_type }}</span>
          </template>
        </el-table-column>
        <el-table-column label="领单人" width="120">
          <template slot-scope="scope">
            <span
              v-if="scope.row.is_epiboly == 1 || scope.row.employee"
              :style="{ color: scope.row.is_epiboly == 1 ? 'red' : '' }"
              >{{
                scope.row.is_epiboly == 1
                  ? "外包"
                  : scope.row.employee.employee_name
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="指派日期" width="170">
          <template slot-scope="scope">
            <span v-if="scope.row.is_epiboly == 1 || scope.row.employee">{{
              scope.row.is_epiboly == 1
                ? scope.row.epiboly_time
                : scope.row.appoint_time
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="draw_time" label="领单日期" width="170">
        </el-table-column>
        <el-table-column prop="submit_time" label="完成日期" width="170">
        </el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              title="确定外包该订单吗？"
              @confirm="set_waibaos(scope.row)"
            >
              <el-button
                slot="reference"
                type="text"
                style="margin-right: 10px"
                v-if="scope.row.draw_time == null && scope.row.is_epiboly == 2"
                >外包</el-button
              >
            </el-popconfirm>
            <el-button
              @click="set_yuangong(scope.row)"
              type="text"
              v-if="scope.row.draw_time == null && scope.row.is_epiboly == 2"
              >指派</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="add_dayinpush" type="primary" size="small"
          >添加到打印列表</el-button
        >
        <el-button @click="isProducts = false" type="primary" size="small"
          >确定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="指派"
      :visible.sync="isset"
      width="30%"
      :close-on-click-modal="false"
      v-if="moreLists.id && push_more.id"
    >
      <el-row
        style="
          height: 50px;
          line-height: 50px;
          display: flex;
          align-items: center;
        "
      >
        <el-col :span="3"> 订单ID </el-col>
        <el-col :span="21">
          {{ moreLists.id }}
        </el-col>
      </el-row>
      <el-row
        style="
          height: 50px;
          line-height: 50px;
          display: flex;
          align-items: center;
        "
      >
        <el-col :span="3"> 产品名 </el-col>
        <el-col :span="21">
          {{ moreLists.product.product_name }}
        </el-col>
      </el-row>
      <el-row
        style="
          height: 50px;
          line-height: 50px;
          display: flex;
          align-items: center;
        "
      >
        <el-col :span="3"> 订单型号 </el-col>
        <el-col :span="21">
          {{ moreLists.model_number.model_number }}
        </el-col>
      </el-row>
      <el-row
        style="
          height: 50px;
          line-height: 50px;
          display: flex;
          align-items: center;
        "
      >
        <el-col :span="3"> 当前工序 </el-col>
        <el-col :span="21">
          {{ push_more.job_type.job_type }}
        </el-col>
      </el-row>
      <el-row
        style="
          height: 50px;
          line-height: 50px;
          display: flex;
          align-items: center;
        "
      >
        <el-col :span="3"> 员工名称 </el-col>
        <el-col :span="21">
          <el-select
            v-model="push_prder.employee_user_id"
            placeholder="请选择员工"
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in pushCustomerList"
              :key="index"
              :label="item.employee.employee_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isset = false">取消</el-button>
        <el-button @click="push_set">确定</el-button>
      </span>
    </el-dialog>

    <bigimg
      :imgurl="bigurl"
      :product="bigproduct"
      :model_number="bigmodel_number"
      ref="img_big"
    ></bigimg>
  </div>
</template>

<script>
import {
  addOrderPrint,
  getColorList,
  getOrderList,
  createOrder,
  getProductList,
  getModelNumberList,
  getCustomerList,
  assignOrderChild,
  epibolyOrderChild,
  getUserListByJobTypeId,
  getOrderChildListByOrderId,
  getWarehouseList,
  getOrderAuditList,
  downloadcode,
  getOrderFieldLogList,
  automaticGenerationSerialNumber,
  setOrderFieldLogList,
  getSpecificationList,
  delOrder,
  getProductColorList,
  automaticGenerationOrderNumber,
  drawOrderChildByEmployeeCardNumnber,
  createSpecification,
  createColor,
  getProductFieldList,
} from "@/api/product/index";
import html2canvas from "html2canvas";
import { getYeWuYuanList } from "@/api/user";
import bigimg from "@/components/bigimg";
export default {
  inject: ["refresh"],
  components: {
    bigimg,
  },
  data() {
    return {
      isshow: true,
      isjietu: false,
      directionList: [
        {
          name: "左",
        },
        {
          name: "右",
        },
        {
          name: "无",
        },
      ],
      loading: true,
      SpecificationList_s: [],
      ModelNumberList_s: [],
      ColorList_s: [],
      disableds: false,
      disableds_product: false,
      bigurl: "",
      bigproduct: "",
      bigmodel_number: "",
      permissions_arr: [],
      options_order: [],
      uploadImgUrl: this.$global.imgQianJui,
      permission: "",
      permissions: "",
      permissions_s: [],
      props: {
        multiple: true,
      },
      checkAll: false,
      isIndeterminate: false,
      order_data: [],
      ModelNumberLists: [],
      isset: false,
      moreList: [],
      moreLists: {},
      isProducts: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      formatterTime(row, column) {
        let data = row[column.property];
        return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data);
      },
      title: "",
      isProduct: false,
      dataList: [],
      ser: {
        serial_number: "",
        model_number_id: "",
        order_number: "",
        customer_id: "",
        product_id: "",
        order_date: "",
        is_replenishment: "",
        is_stock_up: "",
        start_time: "",
        end_time: "",
      },
      ruleForm: {
        num: "",
        warehouse_id: "",
        goods_shelf_id: "",
        batch_number: "",
        serial_number: "",
        order_number: "",
        order_date: "",
        delivery_date: "",
        account_executive_id: "",
        product_id: "",
        model_number_id: "",
        color_id: "",
        size: "",
        specification_id: "",
        direction: "",
        customer_id: "",
        received: "",
        emergency_procedure: "1",
        is_replenishment: "2",
        is_stock_up: "2",
        receivables: "",
        remark: "",
        id: "",
      },
      rules: {
        num: [{ required: true, message: "请输入数量", trigger: "blur" }],
        warehouse_id: [
          { required: true, message: "请选择仓库", trigger: "blur" },
        ],
        goods_shelf_id: [
          { required: true, message: "请选择货架", trigger: "blur" },
        ],
        batch_number: [
          {
            required: true,
            message: "请输入生产批号",
            trigger: "blur",
          },
        ],
        specification_id: [
          {
            required: true,
            message: "请选择规格",
            trigger: "blur",
          },
        ],
        serial_number: [
          {
            required: true,
            message: "请输入流水号",
            trigger: "blur",
          },
        ],
        order_number: [
          {
            required: true,
            message: "请输入订单号",
            trigger: "blur",
          },
        ],
        order_date: [
          {
            required: true,
            message: "请选择下单日期",
            trigger: "blur",
          },
        ],
        delivery_date: [
          {
            required: true,
            message: "请选择交货日期",
            trigger: "blur",
          },
        ],
        account_executive_id: [
          {
            required: true,
            message: "请选择员工",
            trigger: "blur",
          },
        ],
        product_id: [
          {
            required: true,
            message: "请选择产品",
            trigger: "blur",
          },
        ],
        model_number_id: [
          {
            required: true,
            message: "请选择型号",
            trigger: "blur",
          },
        ],
        color_id: [
          {
            required: true,
            message: "请选择颜色",
            trigger: "blur",
          },
        ],
        size: [
          {
            required: true,
            message: "请选择规格",
            trigger: "blur",
          },
        ],
        direction: [
          {
            required: true,
            message: "请输入产品方向",
            trigger: "blur",
          },
        ],
        customer_id: [
          {
            required: true,
            message: "请选择客户",
            trigger: "blur",
          },
        ],
        emergency_procedure: [
          {
            required: true,
            message: "请选择紧急程度",
            trigger: "blur",
          },
        ],
        is_replenishment: [
          {
            required: true,
            message: "是否补货",
            trigger: "blur",
          },
        ],
        is_stock_up: [
          {
            required: true,
            message: "是否备货",
            trigger: "blur",
          },
        ],
        receivables: [
          {
            required: true,
            message: "请输入应收款金额",
            trigger: "blur",
          },
        ],
      },
      pagination: {
        per_page: 10,
        page: 1,
      },
      total: 0,
      productList: [],
      EmployeeList: [],
      ModelNumberList: [],
      ColorList: [],
      SpecificationList: [],
      CustomerList: [],
      // 指派提交数据
      push_prder: {
        child_order_id: "",
        employee_user_id: "",
      },
      push_more: {},
      pushCustomerList: [], //指定工种员工列表
      // 外包提交

      cangkulist: [],
      huojialist: [],
      AuditList: [],
      sort_types: false,
      order_ids: "",
      FieldList: [],
      FieldList_new: [],
    };
  },
  created() {
    this.get_OrderFieldLogList();
  },
  mounted() {
    this.getlist();
    this.getproduct();
    this.getEmpl();
    this.getModel();
    this.getCustomer();
    this.getcangku();
    this.get_OrderAuditList();
  },
  watch:{
    "ruleForm.receivables"(news,olds){
      console.log(news)
       let discount_num = this.set_FieldList_news('discount')//折扣
       let num = (Number(news)*Number(discount_num))-Number(this.ruleForm.received)
       console.log(num)
       this.set_FieldList_new(num,'"residual_payment"')
    },
    "ruleForm.received"(news,olds){
      console.log(news)
       let discount_num = this.set_FieldList_news('discount')//折扣
       let num = (Number(this.ruleForm.receivables)*Number(discount_num))-Number(news)
       console.log(num)
       this.set_FieldList_new(num,'"residual_payment"')
    },
  },
  methods: {
    set_FieldList_news(type){
      this.FieldList_new.forEach(item=>{
        if(item.field==type){
          return item.default_value
        }
       })
    },
    ewai_input(val,mode){
      // console.log(val)
      // console.log(mode)
      if(mode=='discount'){
        if(val>1){
          this.$message.error("折扣需小于1！");
          let num=0
          this.set_FieldList_new(num,'discount')
          return false;
        }
       var num=(Number(val)*Number(this.ruleForm.receivables))-Number(this.ruleForm.received)
       this.set_FieldList_new(num,'"residual_payment"')
       console.log(this.FieldList_new)
      
      }
    },
    set_FieldList_new(num,type){
      this.FieldList_new.forEach(item=>{
        if(item.field==type){
          item.default_value=num
          console.log(num)
        }
       })
    },
    push_name(val) {
      console.log(val);
      for (var i = 0; i < this.FieldList_new.length; i++) {
        if (
          val == this.FieldList_new[i].field &&
          this.FieldList_new[i].show == "1"
        ) {
          console.log(this.FieldList_new[i].name);
          return this.FieldList_new[i].name;
        }
      }
    },
    // 指定查询
    search(type) {
      if (type == 0) {
        this.pagination.per_page = 10;
        this.pagination.page = 1;
      }
      if (this.ser.product_id == "") {
        this.$message.error("请选择产品");
        return false;
      }
      getOrderList({ ...this.ser, ...this.pagination }).then((res) => {
        if (res.code == 200) {
          this.get_ProductFieldLists(this.ser.product_id);
          this.dataList = res.data.data;
          this.total = res.data.total;
          if (type == 2) {
            if (res.data.data.length > 0) {
              this.$message.success("正在导出订单列表");
              this.exports_w();
            }
          }
        }
      });
    },
    get_ProductFieldLists(val) {
      getProductFieldList({ product_id: val }).then((res) => {
        if (res.code == 200) {
          this.FieldList = res.data;
          this.FieldList_new = [];
          this.FieldList.forEach((item) => {
            if (item.is_default == 2) {
              this.FieldList_new.push(item);
            }
          });
          console.log(this.FieldList_new);
        }
      });
    },
    select_goods_shelf(val) {
      this.huojialist.forEach((item) => {
        if (val == item.id) {
          this.$set(this.ruleForm, "goods_shelf", item.goods_shelf);
        }
      });
    },
    direction_change(val) {
      this.directionList.forEach((item) => {
        if (val == item.id) {
          this.$set(this.ruleForm, "direction", item.name);
        }
      });
    },
    account_executive_change(val) {
      this.EmployeeList.forEach((item) => {
        if (val == item.id) {
          this.$set(this.ruleForm, "account_executive", item.company_name);
        }
      });
    },
    customer_change(val) {
      this.CustomerList.forEach((item) => {
        if (val == item.id) {
          this.$set(this.ruleForm, "customer_name", item.customer_name);
        }
      });
    },

    handleExport() {
      let htmlDom = document.getElementById("printArea"); // 你要截图的元素  可直接是img
      console.log(htmlDom);
      var FileSaver = require("file-saver");
      this.$nextTick(function () {
        html2canvas(htmlDom, {
          scale: 1,
          // x: htmlDom.offsetLeft, //传入x和y长度，拒绝空白图片
          // y: htmlDom.offsetTop,
          x: 0, //传入x和y长度，拒绝空白图片
          y: 0,
          allowTaint: false, //允许污染
          taintTest: true, //在渲染前测试图片
          useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用)
          background: "#fff",
        }).then((canvas) => {
          // getBase64Image（imgurl）
          if (navigator.msSaveBlob) {
            navigator.msSaveBlob(canvas.msToBlob(), "demo.png");
          } else {
            canvas.toBlob(function (blob) {
              FileSaver.saveAs(blob, "demo.png");
            });
          }
        });
      });
    },
    required(val) {
      for (let i = 0; i < this.FieldList.length; i++) {
        if (this.FieldList[i].field == val && this.FieldList[i].required == 1) {
          return this.FieldList[i].field;
        }
      }
    },
    forEachs(val) {
      for (let i = 0; i < this.FieldList.length; i++) {
        if (this.FieldList[i].field == val && this.FieldList[i].show == "1") {
          return true;
        }
      }
    },
    product_id_change_1(val) {
      this.ModelNumberList = [];
      this.ColorList = [];
      this.SpecificationList = [];
      this.ruleForm.model_number_id = "";
      this.ruleForm.color_id = "";
      this.ser.model_number_id = "";
      this.ruleForm.specification_id = "";
      this.get_ProductFieldList(val);
    },
    get_ProductFieldList(val) {
      getProductFieldList({ product_id: val }).then((res) => {
        if (res.code == 200) {
          this.FieldList = res.data;
          let FieldList_new = [];
          this.FieldList.forEach((item) => {
            if (item.is_default == 2) {
              FieldList_new.push(item);
              this.$nextTick(()=>{
                 this.$set(this.ruleForm, item.field, item.default_value);
              })
             
            }
          });
          
          this.produc_number_id = val;
          this.ruleForm.product_id = val;
          this.productList.forEach((item) => {
            if (val == item.id) {
              this.$set(this.ruleForm, "product_name", item.product_name);
            }
          });

          console.log(this.ruleForm)
          this.get_producModel(val);
          this.get_produccolor(val);
          this.FieldList_new = FieldList_new;
          this.automatic_GenerationSerialNumber();
          this.auto_maticGenerationOrderNumber();
        }
      });
    },
    yanse_change(val) {
      var list = [];
      for (let i = 0; i < this.ColorList.length; i++) {
        list.push(this.ColorList[i].id);
        if (val == this.ColorList.id) {
          this.$set(this.ruleForm, "color", this.ColorList[i].color);
        }
      }
      if (!list.includes(val)) {
        this.create_Color(val);
      }
    },
    create_Color(val) {
      let lists = [];
      let list = [];
      list.push(val);
      lists.push(this.ruleForm.product_id);
      let obj = {
        product_ids: lists,
        color_names: list,
      };
      createColor(obj).then((res) => {
        if (res.code == 200) {
          let lengths = this.ColorList.length;
          this.$set(this.ColorList, lengths, { id: res.data[0], color: val });
          this.get_produccolor(this.ruleForm.product_id);
          let that = this;
          setTimeout(() => {
            that.ruleForm.color_id = res.data[0];
          }, 500);
          console.log(this.ColorList);
        }
      });
    },
    guige_change(val) {
      console.log(val);
      var list = [];
      console.log(this.SpecificationList);
      for (let i = 0; i < this.SpecificationList.length; i++) {
        list.push(this.SpecificationList[i].id);
        if (val == this.SpecificationList[i].id) {
          this.$set(
            this.ruleForm,
            "specification",
            this.SpecificationList[i].specification
          );
        }
      }
      if (!list.includes(val)) {
        this.update_Specification(val);
      }
    },
    update_Specification(val) {
      let specification_id = [];
      specification_id.push(val);
      let obj = {
        product_id: this.ruleForm.product_id,
        model_number_id: this.ruleForm.model_number_id,
        specification_ids: specification_id,
      };
      createSpecification(obj).then((res) => {
        if (res.code == 200) {
          let lengths = this.SpecificationList.length;
          this.$set(this.SpecificationList, lengths, {
            id: res.data[0],
            specification: val,
          });
          console.log(this.SpecificationList);
          this.model_number_id_changes(
            this.ruleForm.product_id,
            this.ruleForm.model_number_id
          );
        }
        let that = this;
        setTimeout(() => {
          this.ruleForm.specification_id = res.data[0];
        }, 500);
      });
    },
    del_Order(id) {
      delOrder({ id }).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.isProduct = false;
          this.getlist();
        }
      });
    },
    push_img(row) {
      this.bigurl = row.model_number.file.file_url;
      this.bigproduct = row.product.product_name;
      this.bigmodel_number = row.model_number.model_number;
      this.$refs.img_big.open();
    },
    add_dayinpush() {
      if (this.multipleSelection.length == 0) {
        this.$message.error("请选择子订单");
        return false;
      }
      let noling = [];
      let ids = [];
      for (var i = 0; i < this.multipleSelections.length; i++) {
        if (
          this.multipleSelections[i].employee == null &&
          this.multipleSelections[i].is_epiboly == 2 &&
          this.multipleSelections[i].is_appoint == 2
        ) {
          this.$message.error("所选订单有未指派的订单！请指派后在添加~");
          return false;
        }
        if (!this.multipleSelections[i].draw_time) {
          let obj = {
            user_id: this.multipleSelections[i].employee_user_id,
            order_child_id: this.multipleSelections[i].id,
          };
          // 没有领单的
          noling.push(obj);
        } else {
          // 有领单的
          ids.push(this.multipleSelections[i].id);
        }
      }
      // 有领单的
      if (ids.length > 0) {
        this.dayin_2(ids);
      }
      // 没有领单的
      if (noling.length > 0) {
        noling.forEach((item) => {
          this.postw_drawOrderChildByEmployeeCardNumnber(
            item.user_id,
            item.order_child_id
          );
        });
      }
    },
    postw_drawOrderChildByEmployeeCardNumnber(user_id, order_child_id) {
      let obj = {
        order_child_id,
        user_id,
        parent_username: this.parent_username,
      };
      drawOrderChildByEmployeeCardNumnber(obj).then((res) => {
        if (res.code == 200) {
          this.getOrderChild(this.order_ids);
          this.dayin(this.order_ids, order_child_id);
        } else {
          this.$message.error("领单失败");
        }
      });
    },
    isProducts_close() {
      this.order_ids = "";
    },
    dayin_2(ids) {
      let obj = {
        order_id: this.order_ids,
        order_child_ids: ids,
      };
      addOrderPrint(obj).then((res) => {
        if (res.code == 200) {
          this.$message.success("添加成功");
        }
      });
    },
    dayin(id, ids) {
      let id_s = [];
      id_s.push(ids);
      let obj = {
        order_id: id,
        order_child_ids: id_s,
      };
      addOrderPrint(obj).then((res) => {
        if (res.code == 200) {
          this.$message.success("添加成功");
        }
      });
    },

    handleSelectionChang(val) {
      if (val.length > 0) {
        this.multipleSelections = val;
        this.order_id = val[0].order_id;
        this.multipleSelection = [];
        val.forEach((item) => {
          let obj = {
            user_id: item.employee_user_id,
            order_child_id: item.id,
          };
          this.multipleSelection.push(obj);
        });
      } else {
        this.multipleSelection = [];
      }
    },
    // 设置显示字段
    push_permission() {
      let obj = {
        order_type: 1,
        ids: this.permissions_arr,
      };
      setOrderFieldLogList(obj).then((res) => {
        if (res.code == 200) {
          console.log(res);
          this.$message.success("设置成功");
          this.getlist();
        }
      });
    },
    dialog_close() {
      this.moreList = [];
    },
    automatic_GenerationSerialNumber() {
      automaticGenerationSerialNumber().then((res) => {
        this.ruleForm.serial_number = res.data;
      });
      0;
      console.log(this.ruleForm.serial_number);
    },
    get_OrderFieldLogList() {
      getOrderFieldLogList({ order_type: 1 }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.options_order = res.data;
          this.options_order.forEach((item) => {
            if (item.is_show == 1) {
              this.permissions_arr.push(item.id);
            }
          });
        }
        console.log(this.permissions_arr);
        this.permissions = this.permissions_arr.toString();
        console.log(this.permissions);
      });
    },
    order_change(val) {
      console.log(val);
      console.log();
    },
    getlists(obj) {
      getOrderList(obj).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
          this.total = res.data.total;
        }
      });
    },
    sort_change(prop) {
      console.log(prop);
      this.sort_types = !this.sort_types;
      console.log(this.sort_types);
      let sort_type = "";
      if (this.sort_types == true) {
        sort_type = "desc";
      } else {
        sort_type = "asc";
      }
      let obj = {
        field_name: prop.prop,
        sort_type,
      };
      this.getlists(obj);
    },
    order_data_change(val) {
      this.ser.start_time = val[0];
      this.ser.end_time = val[1];
    },
    // // 型号列表
    getModel() {
      getModelNumberList().then((res) => {
        if (res.code == 200) {
          this.ModelNumberLists = res.data.data;
        }
      });
    },

    product_id_change(val) {
      console.log(val);
      this.ModelNumberList = [];
      this.ColorList = [];
      this.SpecificationList = [];
      this.ruleForm.model_number_id = "";
      this.ruleForm.color_id = "";
      this.ser.model_number_id = "";
      this.ruleForm.specification_id = "";
      this.get_producModel(val);
      this.get_produccolor(val);
      this.produc_number_id = val;
    },

    set_product(row) {
      console.log(row);
      if (this.$store.state.user.name == "超级管理员") {
        this.disableds = false;
        this.disableds_product = true;
      } else {
        this.disableds = true;
      }
      this.title = "订单修改";
      this.$nextTick(() => {
        this.ruleForm = row;
      });
      this.isProduct = true;

      this.get_producModel(row.product_id);
      this.get_produccolor(row.product_id);
      this.model_number_id_changes(row.product_id, row.model_number_id);
    },
    get_produccolor(id) {
      getProductColorList({ product_id: id }).then((res) => {
        if (res.code == 200) {
          this.ColorList = res.data;
        }
      });
    },
    get_producModel(id) {
      getModelNumberList({
        product_id: id,
        field_list: "id,model_number",
        is_dropdown: 1,
        file: 1,
      }).then((res) => {
        if (res.code == 200) {
          this.ModelNumberList = res.data.data;
        }
      });
    },
    model_number_id_changes(id, ids) {
      let obj = {
        product_id: id,
        model_number_id: ids,
      };
      getSpecificationList(obj).then((res) => {
        if (res.code == 200) {
          this.ModelNumberList.forEach((item) => {
            if (ids == item.id) {
              this.$set(this.ruleForm, "model_number", item.model_number);
            }
          });
          this.SpecificationList = res.data.data;
        }
      });
    },
    model_number_id_change(val) {
      let obj = {
        product_id: this.produc_number_id,
        model_number_id: val,
      };
      getSpecificationList(obj).then((res) => {
        if (res.code == 200) {
          this.SpecificationList = res.data.data;
        }
      });
    },
    get_OrderAuditList() {
      getOrderAuditList().then((res) => {
        if (res.code == 200) {
          this.AuditList = res.data.data;
        }
      });
    },
    select_huojiua(val) {
      console.log(val);
      this.huojialist = [];
      this.cangkulist.forEach((element) => {
        if (val == element.id) {
          this.huojialist = element.goods_shelf;
          this.$set(this.ruleForm, "warehouse", element.warehouse_name);
          console.log(this.huojialist);
        }
      });
      console.log(this.huojialist);
    },
    getcangku() {
      getWarehouseList().then((res) => {
        if (res.code == 200) {
          this.cangkulist = res.data.data;
        }
      });
    },

    // 导出
    exports_w() {
      let data = {
        ...this.ser,
        export: 1,
      };
      downloadcode(data).then((res) => {
        //创建一个隐藏的a连接，
        const link = document.createElement("a");
        let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
        link.style.display = "none";
        //设置连接
        link.href = URL.createObjectURL(blob);
        link.download = "订单信息";
        document.body.appendChild(link);
        //模拟点击事件
        link.click();
      });
    },
    searchreset() {
      this.ser = {
        model_number_id: "",
        order_number: "",
        customer_id: "",
        product_id: "",
        order_date: "",
        is_replenishment: "",
        is_stock_up: "",
        start_time: "",
        end_time: "",
      };
      this.getlist();
    },
    // 客户列表
    getCustomer() {
      getCustomerList({ per_page: 1000 }).then((res) => {
        if (res.code == 200) {
          this.CustomerList = res.data.data;
        }
      });
    },

    // 业务员列表
    getEmpl() {
      getYeWuYuanList().then((res) => {
        if (res.code == 200) {
          this.EmployeeList = res.data;
        }
      });
    },
    //产品列表
    getproduct() {
      getProductList().then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
        }
      });
    },
    // del_product(row) {
    //   console.log("ww");
    //   delColor({
    //     id: row.id,
    //     is_del: 1,
    //   }).then((res) => {
    //     if (res.code == 200) {
    //       this.isProduct = false;
    //       this.$message.success("提交成功");
    //       this.getlist();
    //     }
    //   });
    // },
    getlist() {
      getOrderList({ ...this.pagination, ...this.ser }).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        }
      });
    },

    add_order_close() {
      this.ruleForm = {
        // num: "",
        // warehouse_id: "",
        // goods_shelf_id: "",
        // batch_number: "",
        // serial_number: "",
        // order_number: "",
        // order_date: "",
        // delivery_date: "",
        // account_executive_id: "",
        // product_id: "",
        // model_number_id: "",
        // color_id: "",
        // size: "",
        // specification_id: "",
        // direction: "",
        // customer_id: "",
        // received: "",
        // emergency_procedure: "1",
        // is_replenishment: "2",
        // is_stock_up: "2",
        // receivables: "",
        // remark: "",
        // id: "",
      };
    },
    auto_maticGenerationOrderNumber() {
      automaticGenerationOrderNumber().then((res) => {
        this.ruleForm.order_number = res.data;
      });
    },
    add_color(formName) {
      console.log(formName);
      this.title = "新增订单";
      this.isProduct = true;
    },
    submitadd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.isjietu = true;
          createOrder(this.ruleForm).then((res) => {
            if (res.code == 200) {
              this.isProduct = false;
              this.isjietu = false;
              this.$message.success(
                "提交成功,进入审核流程,审核通过之后在订单列表查看~"
              );
              this.getlist();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // submitadd() {
    //   this.handleExport();
    //   createOrder(this.ruleForm).then((res) => {
    //     if (res.code == 200) {
    //       this.isProduct = false;
    //       this.isjietu = false;
    //       this.$message.success(
    //         "提交成功,进入审核流程,审核通过之后在订单列表查看~"
    //       );
    //       this.getlist();
    //     }
    //   });
    // },
    handleSizeChange(val) {
      console.log(val);
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagination.page = val;
      this.getlist();
    },
    prev() {
      this.pagination.page = this.pagination.page - 1;
      this.getlist();
    },
    next() {
      console.log("ss");
      this.pagination.page = this.pagination.page + 1;
      this.getlist();
    },
    // 获取对应子订单信息
    getOrderChild(id) {
      this.order_ids = id;
      getOrderChildListByOrderId({ order_id: id }).then((res) => {
        if (res.code == 200) {
          // this.moreLists=res.data
          this.moreList = res.data;
        }
      });
    },
    //指派订单大弹窗
    set_products(row) {
      this.moreLists = row;
      this.getOrderChild(row.id);
      this.isProducts = true;
    },
    // 外包提交
    set_waibaos(row) {
      console.log(row);
      epibolyOrderChild({ child_order_id: row.id }).then((res) => {
        if (res.code == 200) {
          this.$message.success("外包成功");
          this.getOrderChild(this.moreLists.id);
        }
      });
    },
    //获取指定工种员工列表
    getUser(id) {
      getUserListByJobTypeId({ job_type_id: id }).then((res) => {
        if (res.code == 200) {
          this.pushCustomerList = res.data;
        }
      });
    },
    //打开指派弹窗
    set_yuangong(row) {
      console.log(row);
      this.push_more = row;
      this.isset = true;
      this.push_prder.child_order_id = row.id;
      this.getUser(row.job_type.id);
    },
    // 指派提交
    push_set() {
      assignOrderChild(this.push_prder).then((res) => {
        this.$message.success("指派成功");
        this.isset = false;
        this.getOrderChild(this.moreLists.id);
        this.push_prder = {
          child_order_id: "",
          employee_user_id: "",
        };
      });
    },
  },
};
</script>

<style scoped>
.el-dropdown-menu {
  text-align: center;
}

.el-dropdown-menu .el-button--text {
  width: 100%;
}
.list_order {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: left;
}
.list_order .lis {
  width: 100%;
}
#printArea {
  height: 100%;
}
#printArea table tr td {
  width: 100%;
  display: flex;
  align-items: center;
}

#printArea table {
  border: 1px solid #c5c5c5;
}
#printArea table td {
  border: 1px solid #c5c5c5;
  text-align: center;
  padding: 0;
  margin: 0;
  padding: 0 5px;
  min-height: 30px;
  box-sizing: border-box;
}

#printArea table td span {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#printArea table td span:first-child {
  width: 150px;
  border-right: 1px solid #c5c5c5;
}

#printArea table td span:last-child {
  flex: 1;
}
</style>
